import React, { Component } from 'react';
import { useContext } from 'react';
// 1.创建上下文对象
const MyContext = React.createContext();
const ColorContext = React.createContext();

// 3.后代获取数据
// 3.1 如果后代组件是类组件 可以通过 类的静态属性 static contextType = 上下文对象 获取祖先组件的值，然后在jsx中 通过 this.context 取值即可
// class Third extends Component {
//   static contextType = MyContext
//   render () {
//     return (
//       <div>
//         <h3>third!!</h3>
//         <div>{ this.context }</div>
//       </div>
//     )
//   }
// }
// 3.2 如果不使用 静态属性，那么可以 通过 上下文对象.Consumer 来获取数据(在其内部图片通过函数返回jsx代码，函数的默认参数就是祖先组件传递的值)
class Third extends Component {
  render () {
    return (
      <div>
        <h3>third!!</h3>
        <div>
          <MyContext.Consumer >
            {
              (value) => {
                return <mark>{ value }</mark>
              }
            }
          </MyContext.Consumer>
        </div>
      </div>
    )
  }
}
// 4.如果传递了多个上下文对象
// 即使为类组件，那么也不建议使用 静态属性属性，推荐使用 Consumer 嵌套来获取数据，一定要注意嵌套的规则
const Second = () => {
  return (
    <div>
      <h2>second</h2>
      <MyContext.Consumer>
        {
          (myval) => {
            return (
              <div>
                {myval} - 
                <ColorContext.Consumer>
                  {
                    (colorVal) => {
                      return (<span>{ colorVal }</span>)
                    }
                  }
                </ColorContext.Consumer>
              </div>
            )
          }
        }
      </MyContext.Consumer>
      <Third/>
    </div>
  )
}
// 5.如果后代组件是函数式组件，那么可以通过 useContext 简化操作 ---- 剧透
const First = () => {
  const my = useContext(MyContext)
  const color = useContext(ColorContext)
  return (
    <div>
      <h1>first</h1>
      <div>{color} - { my }</div>
      <Second/>
    </div>
  )
}
class App extends Component {
  render() {
    return (
      <div>
        {/* 2.在需要传值的地方，通过 上下文 对象 的 Provider 组件以及value属性配合传递数据 */}
        <MyContext.Provider value = "传家宝">
          <ColorContext.Provider value = "红色">
            <First />
          </ColorContext.Provider>
        </MyContext.Provider>
        
      </div>
    );
  }
}

export default App;